<script lang="ts" setup>
import { useAsyncState, useDebounceFn } from "@vueuse/core";
import { useCharacterStore, useConfigStore } from "@/store";
import { getImage } from "@/utils";

const showMode = ref(true);

const configStore = useConfigStore();
const charStore = useCharacterStore();

const result = useAsyncState(
  () => {
    return configStore.calc();
  },
  {
    basicInfo: [],
    skillInfo: [],
    token: "",
  },
  { resetOnExecute: false, immediate: true }
);

// watch(() => charStore.alter, useDebounceFn(async () => {
//   if(configStore.alter != "" )
//     await result.execute()
// }, 500))

watch(
  () => JSON.stringify(configStore.equips),
  useDebounceFn(async () => {
    if (
      configStore.token != "" &&
      Object.keys(configStore.equips).filter(
        (a) => configStore.equips[a].id !=""
      )?.length >= 9
    ) {
      await result.execute();
    }
  }, 1500)
);
</script>

<template>
  <view class="calc-res-box" v-if="charStore.name">
    <view
      class="flex flex-wrap"
    >
      <view  v-for="item in result.state.value.basicInfo ?? []" class="flex items-center justify-between w-50%">
        <view class="flex justify-center items-center detailTitle text-hex-9c917d">
          <image class="detailIcon w-50rpx h-50rpx" :src="getImage(item.icon)" />
          <view>{{ item?.name }}</view>
        </view>
        <view class="pr-5px">{{ item.value }}</view>
      </view>

    </view>
  </view>
</template>

<style lang="scss" scoped>
.selected {
  color: #ffcc33;
}

.calc-res-box {
  padding: 15px 0;
  position: relative;
  padding-top: 0px;
}
.hr {
  border-bottom: 1px solid #333;
  margin-bottom: 7px;
  margin-top: 10px;

  &:first-child {
    margin-top: 0px;
  }
}


.detailIcon {
  -webkit-filter: drop-shadow(0px 0 0 #0000);
  filter: drop-shadow(0px 0 0 #0000);

}

.store-eq-data-row {
  display: flex;
  justify-content: center;
  margin-bottom: 7px;

  .data {
    font-size: 18px;
  }

  .store-eq-data-cell {
    width: calc(50% - 8px);

    &:nth-child(2),
    &:nth-child(3) {
      margin-left: 16px;
      // padding-right: 12px;
    }

    &.only-cell {
      width: 100%;
      display: flex;
      // padding-right: 12px;

      .data-cell-label {
        width: 60px;
      }

      .data-cell-data {
        width: calc(100% - 60px);
        text-align: right;

        .rq-prop-type-item {
          display: inline-block;
          margin-left: 10px;
        }
      }
    }

    .data-cell-label {
      color: #726643;
    }

    .data-cell-data {
      float: right;
      color: #3e8848;
    }
  }
}
</style>
